<!-- 商品详情页面 -->
<template>

  <div class="p-detail">
    <my-header></my-header>
    <div class="w " style="margin-top:50px">
      <!-- 商品信息阅览 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="pro-imgs">
            <el-carousel :interval="5000" arrow="always" height="450px" indicator-position="none">
              <el-carousel-item v-for="(images,index) in data.imagesUrl" :key="index">
                <div class="p-images" style="heigh:100%;width:100%">
                  <img style="height:450px;width:100%" :src="images.url" :key="index" alt="">
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="p-info" style="height:450px">
            <el-card class="box-card" style="height:100%">
              <div slot="header" class="clearfix">
                <h2 class="p-name">{{data.product.productName}}</h2>
                <h4 class="p-subtitle" style="float:left;margin:5px ,0">{{data.product.productSubtitle}}</h4>
              </div>
              <div class="p-info-item price-before">
                <span class="label">原价：</span>
                <span class="label-info">￥{{data.product.promotionPrice}}</span>
              </div>
              <div class="p-info-item price-now">
                <span class="label">售价：</span>
                <span class="label-info price-now">￥{{data.product.normalPrice}}</span>
              </div>
              <div class="p-info-item">
                <span class="label">库存：</span>
                <span class="label-info">{{data.product.productStock}}（件）</span>
              </div>
              <div class="p-info-item">
                <span class="label">发布：</span>
                <span class="label-info">{{data.product.createTime}}</span>
              </div>
              <div class="p-info-item">
                <span class="label">数量：</span>
                <el-input-number v-model="data.productCount" size="mini" controls-position="right" :min="1" :max="12" label="数量：">

                </el-input-number>
              </div>
              <div class="p-button" style="float:left;margin-top:47px">
                <el-button type="primary" @click="add2Cart">加入购物车</el-button>
              </div>
            </el-card>

          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>店家</span>
              </div>
              <div class="text item" style="margin:0 auto">
                <img style="width:50px;height:50px; border-radius: 50%;margin:0 auto" :src="data.product.ownerImage" alt="">
              </div>
              <div style="margin-top:5px">{{data.product.ownerName}}</div>
            </el-card>
          </div>
        </el-col>
      </el-row>

      <div class="pro-desc" style="margin-top: 50px;">
        <el-tabs v-model="pageData.activeName" @tab-click="handleClick">
          <el-tab-pane label="听我说" name="first">
            <div class="p-des" v-html="data.product.productDesc" style="text-align:left;font-size:13px">

            </div>
          </el-tab-pane>
          <el-tab-pane label="听你说" name="second">商品评论</el-tab-pane>
          <el-tab-pane label="看看我" name="third">店家商品推荐</el-tab-pane>
          <el-tab-pane :label="data.product.ownerName+'推荐'" name="fourth">todo</el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--添加商品成功的弹出框 -->
    <div class="addCart-suc">

      <el-dialog title="添加商品成功" :visible.sync="pageData.addCartSucVisible" width="30%" center>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pageData.addCartSucVisible = false">继续购物</el-button>
          <el-button type="primary" @click="goToCart">查看购物车</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import MyHeader from "@/components/Header";
import MyFooter from "@/components/Footer";
import Product from "@/service/product-service";
import Cart from "@/service/cart-service";
import Tips from "@/utils/tipsUtil";
const _tips = new Tips();
const _product = new Product();
const _cart = new Cart();

export default {
  data() {
    return {
      pageData: {
        activeName: "first",
        addCartSucVisible : false
      },
      data: {
        product: "",
        imagesUrl: [],
        productCount: 0
      }
    };
  },

  components: {
    MyHeader,
    MyFooter
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      const vue = this;
      const productId = this.$route.query.id;
      _product.getProductDetail(productId).then(
        res => {
          let responseData = res.data;
          vue.data.product = responseData;
          vue.filterImages(responseData, vue);
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /**
     *
     */
    filterImages(resData, vue) {
      const host = resData.imageHost,
        subImages = resData.subImgsAddr;
      let images = subImages.split(",");
      vue.data.imagesUrl = images.map(function(imagesUri) {
        return {
          url: host + imagesUri
        };
      });
    },

    /**
     * 添加到购物车
     */
    add2Cart() {
      const vue = this;
      if (vue.data.productCount) {
        const data = {
          productId: vue.data.product.id,
          count: vue.data.productCount
        };
        _cart.addPro2Cart(data).then(
          res => {
            vue.pageData.addCartSucVisible = true
          },
          err => {
            _tips.notifyTips(vue, err.msg);
          }
        );
      } else {
        this.$message("请输入商品的数量---");
      }
    },

    /**
     * 跳转到购物车页面 
     */
    goToCart(){
      this.$router.push({path:'/cart'})
    }
  }
};
</script>
<style lang='scss' scoped>
.pro-imgs {
  .el-carousel__item h3 {
    font-size: 18px;
    opacity: 0.75;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.p-info-item {
  text-align: left;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  padding-left: 5px;
  margin-bottom: 2px;
  .label {
    font-size: 14px;
    margin-right: 5px;
  }
  .price-now {
    color: red;
    font-size: 17px;
  }
}
.price-before {
  background-color: #eee;
  opacity: 0.5;
}
.price-now {
}
</style>